<template>
  <div>
    <div class="absolute right-20 z-[99999999999999999999] bottom-80 text-lg flex gap-4 items-center">
      <span>隐藏所有数据</span>
      <el-switch v-model="isShowData" size="large" />
    </div>
    <div v-show="isShowData">
      <!-- <div class="h-[60px] absolute z-50 top-[550px] left-[2220px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">XXXX</span>
            <span>带钢温度</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">XXXX</span>
            <span>宽度</span>
          </div>
        </div>
      </div>
      <div class="h-[60px] absolute z-50 top-[620px] left-[2220px] cflex text-[12px]">
        <img :src="Box4" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">XXXX</span>
            <span>厚度</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">XXXX</span>
            <span>带钢偏差</span>
          </div>
        </div>
      </div> -->

      <div class="h-[60px] absolute z-50 top-[440px] left-[2120px] cflex text-[12px]">
        <img :src="BoxWrapper" class="w-full h-full" />
        <div class="flex items-center gap-4 absolute left-2 ml-2">
          <img :src="Box5" class="w-14" />
          <div class="w-8">出口温度</div>
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P1/Temp_Ext') }}</span>
            <span>2-1</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P3/Temp_Ext') }}</span>
            <span>2-3</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P5/Temp_Ext') }}</span>
            <span>2-5</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[520px] left-[2120px] cflex text-[12px]">
        <img :src="BoxWrapper" class="w-full h-full" />
        <div class="flex items-center gap-4 absolute left-2 ml-2">
          <img :src="Box6" class="w-14" />
          <div class="w-8">带钢偏差</div>
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P1/CenterlineDev') }}</span>
            <span>2-1</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P3/CenterlineDev') }}</span>
            <span>2-3</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P5/CenterlineDev') }}</span>
            <span>2-5</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[600px] left-[2120px] cflex text-[12px]">
        <img :src="BoxWrapper" class="w-full h-full" />
        <div class="flex items-center gap-4 absolute left-2 ml-2">
          <img :src="Box7" class="w-14" />
          <div class="w-8">带钢宽度</div>
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P1/Width') }}</span>
            <span>2-1</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P3/Width') }}</span>
            <span>2-3</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/RMC/L2/ACT/R2_P5/Width') }}</span>
            <span>2-5</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[520px] left-[320px] cflex text-[12px]">
        <img :src="Box3" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/L2/ACT/CB/InUseFlag') }}</span>
            <span>投用模式</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Box2 from '@/assets/imgs/box_temperature.png'
import Box3 from '@/assets/imgs/box_cl.png'
import Box4 from '@/assets/imgs/box_dg.png'
import Line from '@/assets/imgs/line.png'
import BoxWrapper from '@/assets/imgs/box_wrapper.png'
import Box5 from '@/assets/imgs/box_temp_inner.png'
import Box6 from '@/assets/imgs/box_dg_pc_inner.png'
import Box7 from '@/assets/imgs/box_dg_width_inner.png'
import { getL1Data } from '@/api/api'

const isShowData = ref(true)

const dataMap = ref({})

const fetchData = async () => {
  try {
    const res = await getL1Data()
    const map = {}
    if (res && Array.isArray(res.data)) {
      for (const item of res.data) {
        map[item.asset_alias] = item.value
      }
    }
    dataMap.value = map
  } catch (e) {
    console.error('getL1Data error:', e)
  }
}

let timer = null
onMounted(() => {
  fetchData()
  timer = setInterval(fetchData, 10000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const vRaw = (alias) => dataMap.value[alias]

const formatNumber = (v) => {
  if (v === null || v === undefined) return '--'
  const n = Number(v)
  if (!Number.isFinite(n)) return '--'
  return Number.isInteger(n) ? String(n) : n.toFixed(1)
}

const vf = (alias) => formatNumber(vRaw(alias))
</script>

<style lang="scss" scoped>
.gradient-text {
  background: linear-gradient(to bottom, #dce0ff, #06fcff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 兼容 Firefox */
  background-clip: text;
  color: transparent;
}
</style>
